멋진 글쓰기

멋진 글을 쓰려면 HTML을 쓸 줄 알아야 합니다

<>이런 괄호를 치고 안에다가 명령어를 써넣는 거지요..

이걸 태그라고 한대요..

HTML 기본 구성요소는

<HTML>   </HTML>

<HEAD>    </HEAD>

<BODY>    </BODY>

이렇게 되지요..

앞 뒤에 있는 걸 보고 대충 눈치 채신 분도 계시겠지만

명령어 사이에 있는 부분에 그 명령어가 적용되는 거지요..

<HTML> 태그는 이 범위 안의 문서가 HTML 형식으로 작성되었다는 것을 의미하고요..

<HEAD> 태그는 글의 머리말에 해당하는 부분이지요..

<BODY> 태그는 본문이지요..

근데 <HEAD> 태그는 어떻게 쓰는 건지 모르겠구요..

<BODY> 태그부터 알려드릴께요..

<BODY> 태그는 본문을 나타낸다고 했지요?

문자와 색상, 배경화면과 기본 글자색을 지정할 수 있어요..

기본형식은요

<BODY background="aaa.gif"  bgcolor="#000000"  text="#ffffff">이곳에글을..</body>

입니다.

위치가 바뀌어도 아무 상관 없어요. 하나만 써도 되구요..

여기서 background는 배경이미지를 넣는  겁니다.

bgcolor는 배경색 지정..

text는 문자색지정..

색깔은 저렇게 영어로 쓰셔도 되구요..

색상표를보구 코드를 써도 됩니다. 근데 아직 색상표를 못찾았어요..

아직 모르는게 너무 많죠?

red의 코드가 ff0000이던가...

아참.. <body background="aaa.gif"> 태그와 <body bgcolor="#000000">는 같이 쓰지 않는 편이 좋다고 하더군요..

하나만 더 할까요?

<CENTER>

<CENTER>~</CENTER>사이에 들어가는 문서는 항상 문서 중앙에 위치하게 된답니다.

여기까지 올린 것을 연습해 보신 분은 아시겠지만..

태그 안에서는 띄어쓰기가 아무리 많아도 무조건 한 칸으로 인식되지요..

오늘은 문단을 바꾸는 방법을 알려드릴께요..

문단을 바꾸는 태그는 <P>입니다.

이 태그를 사용했을 경우에는 우선 줄을 띈 후 다음 문장을 시작한다.

즉 줄을 바꿈과 동시에 한 줄도 띄게 되는 효과가 있는 거지요..

이 태그는 종료태그가 없으며 보통 문장의 끝에 사용합니다..

아무리 많은 <P>태그를 사용하더라도 결국은 하나의 <P>태그로 인식하게 됩니다.

비슷한 거 하나 더 배워볼까요?

<P ALIGN="align">~</P>

align=left, center, right

문서의 단락을 왼쪽, 가운데, 오른쪽으로 배치하는데 사용합니다.

<P ALIGN="left">안녕하세요?</P>

<P ALIGN="center">이건 가운데 있지요?</P>

<P ALIGN="right">이렇게 하면 오른쪽에 글씨가 쓰입니다.</P>

줄을 바꾸는 태그로 <BR>도 있어요..

<P>태그와 아주 흡사하지만 무엇보다도 명확한 차이는 줄은 바꾸되

다음 줄에 공백은 만들지 않는다는 것입니다.

즉 줄만 바꾸는 태그지요..

너무 어렵나요?

여기 더 쉬운 명령어가 하나 더 있어요..

<PRE>~</PRE>

<PRE>을 사용하면 문장과 단락의 형태를 보다 자유롭게 표현할 수 있지요..

<P>나 <BR>등으로 표현하기에는 너무 복잡한 문장 등은

일괄적으로 <PRE>태그를 사용하세요.

<PRE>태그를 사용하면 태그 안의 문장이 그대로 나타나게 되지요..

그러니깐 여백이나 줄 바꿈 등이 전부 그대로 나타나는 거지요..

<PRE>태그 내부에선 가급적이면 다른 태그의 사용을 피하는 것이 좋습니다.

헷갈릴 수 있기 때문래요..

아참 <PRE>태그를 사용할 때에는 한 줄에 80글자 수가 넘지 않도록 해야 한 대요.

수평 화면은 80개 이상의 글자를 지원하지 않는 브라우저도 있대요..

<pre>를 사용하면

<PRE>

/:""|  .****,

(\/)  |:`66|_ @@@@@\ `,

\/   C`    _)aa`@@@\  \

\ ._| (_   ?@@|  \

)_/   =' @@@@|   |

/`\8\   \(```/    |

|| |8|  /^^\ |     /

|| |8| /\::/||    |

|| |8| \ | |||    \

|| |~|  \| |||     \

:| |=:   |:|\\.:.:.::.

||_|,|   |:| \ ':':':`

\)))||   (((  |

| :||   |    | (\/)

| :||   |    |  \/

) :||   |    \

| :||   |     `\

| :||   |:.:.   `~-._

|_:||_   /~))\       `~~-._

(_,__)) /_/YY `':':':':':':`

</PRE>

이런 그림도 그릴 수 있어요..

이번엔 이미지를 삽입해 볼까요..

그림을 집어 넣는 거지요..

그림을 넣으려면 <IMG SRC="image.gif">이 명령어를 씁니다.

<IMG SRC="   ">태그 안에 삽입하고자 하는 이미지 파일 이름을 삽입하면

웹 상에 이미지를 나타내 줍니다.

이 때 이 그래픽 파일은 위의 화일이 존재하는 같은 디렉토리 안에 있어야 합니다.

만일 다른 디렉토리에 그래픽 파일이 존재한다면

다음과 같이 그 디렉토리에 관한 URL을 모두 써주어야 합니다.

<IMG SRC="C:\HOMEPAGE\강좌\image.gif">

위에서 쓰인 태그 중 IMG란 image의 약어이며, SRC란 source를 의미합니다.

글자는 간격을 아무리 많이 띄우더라도

결국 하나의 간격으로 밖에 처리되지 않는 건 이제 다 아시죠?

그러니깐 글자 사이에 공백을 만드는 방법이 필요하겠네요..

먼저 하얀 글자 사용하기!!

하얀 글자를 사용하는 방법은 만일 홈페이지의 배경 색이 하얀색일 경우에 한해서

하얀색의 글자를 사용하는 거지요..

그러면 아무리 많은 글자를 처넣더라도 결국 여백처럼 보이는 거죠..

여기서 주의해야 할 점은 반드시 배경의 색상과 일치를 시켜야 한다는 거죠..

만일 배경이 파랑 색이면 글자도 파랑 색이 되어야 겠죠?

&nbsp;태그를 사용할 수도 있어요..

이 태그를 사용하면 공백이 생겨요.

반복해서 사용함으로써 원하는 크기의 공백을 만드는 거죠.

그리고 반드시 꺾쇠 표시와 함께 사용하지 않아야 합니다.

그럼 이번에는 글씨를 움직여 볼까요?

글자를 움직이게 하는 명령어는 <marquee>태그입니다

기본형식은요

<marquee direction=right behavior=alternate>여기글을..</marquee>

입니다..

여기서  direction은 방향을 나타냅니다 left, up, down이 더 있겠죠?

그리구 그 뒤의 alternate는 왔다갔다 하는거구요,

loop는 한쪽 방향으로 계속 가는 것입니다.

behavior=loop이렇게 써 넣으면 되지요..

아 그리구 그 뒤에 scrollamount=1 이런 명령어도 있습니다

이건 움직이는 속력이죠 클수록 빠르지요..

아 또 있군요 style=text-align:center 이건 가운데 정렬이죠

글자크기 지정하기

<Hn>~</Hn>

n=1~6

<H1>~<H6>까지의 6가지 크기로 구성되어 있습니다.

1이 가장 큰 사이즈이고, 차례대로 6이 가장 작은 사이즈지요..

한글은 영문에 비해 사이즈가 크기 때문에

가장 작은 사이즈인 <H6>은 영문에 비해 폰트사이즈로 한 포인트 정도 더 커요..

글자크기에 대한 아무런 정의가 없다면 기본값으로 <H4>정도의 크기가 출력됩니다.

<FONT SIZE=n>~</FONT>

n=1~7

<Hn>태그의 사이즈와 반대로 1이 가장 작은 사이즈의 폰트이고,

7이 가장 큰 폰트사이즈예요.. 헷갈리죠?

아무런 정의가 없다면 <FONT SIZE=3>과 같은 크기로 글자를 출력합니다.

이 태그는 반드시 종료태그와 함께 사용해야 해요..

이런 것도 사용해 보세요..

<BIG></BIG>

<SMALL></SMALL>

문자의 사이즈를 한 단계 크게 하거나 작게 하는 태그입니다..

<FONT SIZE=size>태그는 항상 크기의 설정을 해 주어야하는데 비해

<BIG>,<SMALL>태그는 기본폰트(<FONT SIZE=3>)에서

폰트를 한 단계 키우거나 한 단계 줄이는 것이 가능합니다..

이게 더 편할 수도 있겠네요..

글자모양도 지정할 수 있대요..

저는 한 번도 써 본 적이 없어저 잘 모르겠지만..

굵은체

<STRONG></STRONG>

<B></B>

강조하기 위해서 굵은 글씨를 나타내는 태그입니다.

이것은 볼드체에 해당하며 글자를 굵고 진하게 표현합니다.

이탤릭체

<EM></EM>

<I></I>

이탤릭체란 글자를 약간 기울여서 강조하기 위한 서체를 말합니다.

타자체

<KBD></KBD>

<TT></TT>

<CODE></CODE>

타자체를 이용한 폰트를 Courier서체라고 합니다.

이 서체는 고정 글꼴로 만들어져 있대요..

기타

<DFN></DFN>-Definishing Instance

-정의되어지는 단어에 대한 것을 말합니다.

<CITE></CITE>-Citiation

-책이나 사진 등의 제목을 나타낼 때 씁니다. 이탤릭체로 표현됩니다.

<VAR></VAR>-Variable

-일반적으로 이택릭체로 표현됩니다.

<SUB></SUB>-Subscript

-아래 첨자를 의미합니다.

<SUP></SUP>-Superscript

-윗 첨자를 나타낸다.

<U></U>-Underlined

-글자에 밑줄을 긋는 것과 같은 효과이다.

<BLINK></BLINK>

-글자가 깜빡거리는 효과를 준다.